<template>
  <div
    id="navWrapper"
    class="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:relative lg:sticky lg:top-16 bg-white lg:bg-transparent"
  >
    <nav
      id="nav"
      class="px-6 pt-6 overflow-y-auto text-base lg:text-sm lg:py-12 lg:pl-6 lg:pr-8 sticky?lg:h-(screen-16)"
    >
      <div class="mb-8">
        <h5
          class="mb-3 lg:mb-2 text-gray-500 uppercase tracking-wide font-bold text-sm lg:text-xs"
        >
          演示
        </h5>
        <ul>
          <li class="mb-3 lg:mb-1">
            <router-link
              to="/demos/intro"
              active-class="bg-teal-100 text-teal-600"
              class="px-2 -mx-2 py-1 transition duration-200 ease-in-out relative block font-medium rounded inset-0 "
            >
              <span class="relative">仪表盘（Dashboard）</span></router-link
            >
          </li>
        </ul>
      </div>
      <div class="mb-8">
        <h5
          class="mb-3 lg:mb-2 text-gray-500 uppercase tracking-wide font-bold text-sm lg:text-xs"
        >
          入门
        </h5>
        <ul>
          <li class="mb-3 lg:mb-1">
            <router-link
              to="/docs/intro"
              active-class="bg-teal-100 text-teal-600"
              class="px-2 -mx-2 py-1 transition duration-200 ease-in-out relative block font-medium rounded inset-0 "
            >
              <span class="relative">使用说明</span></router-link
            >
          </li>
        </ul>
      </div>
      <div class="mb-8">
        <h5
          class="mb-3 lg:mb-2 text-gray-500 uppercase tracking-wide font-bold text-sm lg:text-xs"
        >
          组件实例
        </h5>
        <ul>
          <li class="mb-3 lg:mb-1">
            <a
              href="/docs/container"
              class="px-2 -mx-2 py-1 transition duration-200 ease-in-out relative block text-teal-600 font-medium"
              ><span
                class="rounded absolute inset-0 bg-teal-200 opacity-25"
              ></span>
              <span class="relative">警告框（Alerts）</span></a
            >
          </li>
          <li class="mb-3 lg:mb-1">
            <a
              href="/docs/box-sizing"
              class="px-2 -mx-2 py-1 transition duration-200 ease-in-out relative block hover:translate-x-2px hover:text-gray-900 text-gray-600 font-medium"
              ><span
                class="rounded absolute inset-0 bg-teal-200 opacity-0"
              ></span>
              <span class="relative">按钮（Button）</span></a
            >
          </li>
          <li class="mb-3 lg:mb-1">
            <a
              href="/docs/display"
              class="px-2 -mx-2 py-1 transition duration-200 ease-in-out relative block hover:translate-x-2px hover:text-gray-900 text-gray-600 font-medium"
              ><span
                class="rounded absolute inset-0 bg-teal-200 opacity-0"
              ></span>
              <span class="relative">卡片（Card）</span></a
            >
          </li>
          <li class="mb-3 lg:mb-1">
            <a
              href="/docs/float"
              class="px-2 -mx-2 py-1 transition duration-200 ease-in-out relative block hover:translate-x-2px hover:text-gray-900 text-gray-600 font-medium"
              ><span
                class="rounded absolute inset-0 bg-teal-200 opacity-0"
              ></span>
              <span class="relative">表单（Form）</span></a
            >
          </li>
          <li class="mb-3 lg:mb-1">
            <a
              href="/docs/clear"
              class="px-2 -mx-2 py-1 transition duration-200 ease-in-out relative block hover:translate-x-2px hover:text-gray-900 text-gray-600 font-medium"
              ><span
                class="rounded absolute inset-0 bg-teal-200 opacity-0"
              ></span>
              <span class="relative">导航栏（Navigation）</span></a
            >
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>

<script>
export default {};
</script>

<style></style>
